<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/store.png" alt> 门店
    </div>
    <div class="clear"></div>
    <div class="store">
      <div class="stitle">{{storeInfo.store_name}}</div>
      <div class="saddress">{{storeInfo.store_address}}</div>
      <div class="slist">
        <span>房间数量：{{storeInfo.room_num}}</span>
        <span>房间最大面积：{{storeInfo.area}}</span>
      </div>
      <div class="slist">
        <span>即将开始的活动：{{storeInfo.ji_num}}</span>
        <span>举办的活动数量：{{storeInfo.jie_num}}</span>
      </div>
    </div>
    <div class="room">
      <div class="rtitle">房间详情</div>
      <div class="roomlist" v-for="(item,index) in roomList" :key="index">
        <div class="roomimg">
          <img :src="item.room_img" alt>
        </div>
        <div class="roominfo">
          <div class="roomtitle">{{item.room_type}}  <img v-for="(items,indexs) in item.comm" :key="indexs" src="./../../images/main/start.png"> </div>
          <div class="slist">
            <span>房间面积：{{item.room_area}}</span>
            <span>建议容纳人数：{{item.room_accommodate}}</span>
          </div>
          <div class="slist">
            <span>举办的活动数量：{{item.jie_num}}</span>
            <span>营业时间：{{item.ying.substring(0,item.ying.length -1)}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
        storeId: -1,
        
      },
      roomList: [],
      total: 0,
      storeInfo: {
        store_name:sessionStorage.store_name,
        store_address:sessionStorage.store_address,
        room_num:sessionStorage.room_num,
        ji_num: sessionStorage.ji_num,
        jie_num:sessionStorage.jie_num
      }
    };
  },
  mounted() {
    this.params.storeId = sessionStorage.id
    // this.storeInfo = JSON.parse(sessionStorage.storeInfo);
    this.getStoreList();
  },
  methods: {
    /**
     * 查看房间
     */
    seeRoom: function(info) {
      Global.storeInfo = info;
    },
    /**
     * 获取房间列表
     */
    getStoreList: function() {
      let that = this;
      axios({
        method: "post",
        data: qs.stringify(this.params),
        url: `store/selectRoomByStoreId`
      }).then(res => {
        if (res.data.code == 0) {
          that.roomList = res.data.data.roomList;
          that.storeInfo.area = res.data.data.max_area
        } else {
          that.$alert(res.msg);
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  }
};
</script>
<style scoped>
.wrap {
  padding: 68px 136px;
  /* width: 100%; */
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.store {
  height: 120px;
  background: #eeeeee;
  padding: 20px 0;
  padding-left:100px;
  margin-top: 20px;
}
.stitle {
  line-height: 40px;
  font-size: 24px;
  font-weight: bold;
}
.saddress {
  line-height: 26px;
}
.slist {
  line-height: 26px;
}
.store .slist > span {
  width: 280px;
  display: inline-block;
}

.room {
  background: #eeeeee;
  margin-top: 20px;
  padding: 0 20px;
}
.room .slist > span {
  width: 400px;
  display: inline-block;
}
.rtitle {
  height: 60px;
  line-height: 60px;
}
.roomlist {
  border-top: 1px solid #ddd;
  overflow: hidden;
}

.roomimg {
  float: left;
  width: 200px;
  /* height: 200px; */
  margin: 20px 80px;
}
.roomimg  img{
  width: 200px;
  height: 120px;
}
.roominfo {
  float: left;
}
.roominfo img {
  margin: 0 5px;
  width: 20px;
}
.roomtitle {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
.clear {
  clear: both;
}
</style>
